<template>
	<view class="printPage">

		<view class="printPageInfoBox flex_shu" :style="{background:`url(${imgUrl}pointbg.png) no-repeat`}">
			<view class="boxTop">
				积分余额
			</view>
			<view class="boxMid flex_heng">
				<view class="boxPrint">
					14588.<span>75</span>
				</view>
				<view class="boxBtn" @click="goPrintList()">
					立即提现
				</view>
			</view>

			<view class="boxBtmOne flex_heng">
				<view class="boxBtmOneLeft flex_shu">
					<view class="month">
						本月获取积分
					</view>
					<view class="number">
						4599.28
					</view>
				</view>
				<u-line direction="col" color="#FFFFFF" margin="0 10rpx"></u-line>
				<view class="boxBtmOneLeft flex_shu">
					<view class="month">
						累计获取积分
					</view>
					<view class="number">
						24599.28
					</view>
				</view>
			</view>
			<u-line></u-line>
			<view class="boxBtmTwo flex_heng">
				<view class="boxBtmTwoLeft">
					25积分=1元
				</view>
				<view class="describe" @click="showDescribe()">
					积分说明<uni-icons type="help" size="11" color="#fff"></uni-icons>
				</view>
			</view>
		</view>


		<view class="printListBox">
			<view class="listTitle">
				<image :src="imgUrl + '/pointLogo.png'" mode="" class="pointLogoImg"></image>
				积分明细
			</view>
			<view class="emptyBox flex_shu" v-if="pointList.length==0">
				<image :src="imgUrl+'empty-point.png'" mode="" class="emptyImg"></image>
				<view class="tips">
					暂无积分
				</view>
				<u-button @click="pageBackClick()" text="返回" :plain="true" color="#4DA1FF" shape="square"></u-button>
			</view>
			<scroll-view v-else class="goods-ul" scroll-y="true" lower-threshold="50" @scrolltolower="scrolltolower">
				<view class="orderItemBox" v-for="(item,index) in pointList" :key="index">
					<view class="itemShopBox flex_heng">
						<view class="shopCardLeft flex_shu">
							<view class="shopCardName">
								{{item.productName}}
							</view>
							<view class="shopCardSku">
								{{item.time}}
							</view>
						</view>

						<view class="shopCardPrice">
							<view class="number" :class="item.type==1?'number':'numberTwo'">
								{{item.type==1?'+':'-'}}{{item.pointNum}}
							</view>
						</view>
					</view>
					<u-line></u-line>
				</view>
				<u-loadmore loadmoreText="正在全力加载更多..." dashed line fontSize="21rpx" nomore-text="没有更多啦!" :status="moreStatus" />
			</scroll-view>

		</view>

		<u-popup :show="describeShow" @close="describeShow = false" @open="describeShow = true" mode="bottom" :round="10"
			:closeable="true">
			<view class="describeCon">
				<view class="describeConTitle">
					积分说明
				</view>
				<view class="smallTitle">
					积分有效期
				</view>
				<view class="conText">
					当年1月1日至12月31日内获取的积分在一个自然年后过期
				</view>
				<view class="smallTitle">
					规则描述
				</view>
				<view class="conText">
					1.每消费一元获得25积分
				</view>
				<view class="conText">
					2.积分可以在商城兑换商品或提现
				</view>
				<view class="smallTitle">
					其他积分
				</view>
				<view class="conText">
					在达人的抖音直播间或橱窗下单用户，可搜索查询抖音订单，后台核 实后可叠加积分
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			// navber
		},
		data() {
			return {
				moreStatus: 'loadmore',
				describeShow: false,
				totalIntegral: 0,
				nowIntegral: 0,
				imgUrl: this.$imgUrl,
				pointList: [{
					productName: '美的万向星河X6 MAX（抖音订单）',
					time: '2024-12-25  16:23',
					type: 1,
					pointNum: '3999.00'
				}, {
					productName: '追觅X50Pro水箱版（商城订单）',
					time: '2024-12-25  16:23',
					type: 2,
					pointNum: '3999.00'
				}, {
					productName: '立白洗衣凝珠浓缩洗衣液',
					time: '2024-12-25  16:23',
					type: 2,
					pointNum: '3999.00'
				}, {
					productName: '蓝盒子Z字抱枕',
					time: '2024-12-25  16:23',
					type: 1,
					pointNum: '3999.00'
				}, {
					productName: '亮碟洗碗粉套装洗碗粉洗碗盐漂洗剂',
					time: '2024-12-25  16:23',
					type: 1,
					pointNum: '3999.00'
				}, {
					productName: '美的万向星河X6 MAX（抖音订单）',
					time: '2024-12-25  16:23',
					type: 1,
					pointNum: '3999.00'
				}, {
					productName: '立白洗衣凝珠浓缩洗衣液',
					time: '2024-12-25  16:23',
					type: 1,
					pointNum: '3999.00'
				}, ],
			};
		},
		computed: {
			...mapState(['hasLogin', 'safeAreaBottom'])
		},
		onLoad() {},
		onShow() {

		},
		methods: {
			scrolltolower() {
				console.log('到底了');
				this.moreStatus = 'nomore'
			},
			goPrintList() {
				uni.navigateTo({
					url: '/pages/subPack/withdrawal/withdrawal'
				})
			},
			//显示说明
			showDescribe() {
				this.describeShow = true
			},

			pageBackClick() {
				uni.navigateBack()
			},

		},
	};
</script>
<style>
	page {
		width: 100vw;
		height: 100vh;
		background: #F5F5F5;
	}
</style>

<style lang="scss">
	.printPage {
		width: 100vw;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		min-height: 100vh;
		background: #f5f5f5;

		.printPageInfoBox {
			width: 100%;
			height: 334rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 22rpx 40rpx;
			box-sizing: border-box;
			background-size: 100% 100% !important;
			color: #FFFFFF;
			align-items: flex-start;

			.boxTop {
				margin-top: 20rpx;
				font-family: HarmonyOS_Sans_SC_Medium;
				font-size: 26rpx;
			}

			.boxMid {
				width: 100%;

				.boxPrint {
					font-size: 38rpx;

					span {
						font-size: 20rpx;
					}
				}

				.boxBtn {
					width: 194rpx;
					height: 76rpx;
					text-align: center;
					line-height: 76rpx;
					font-family: HarmonyOS_Sans_SC_Medium;
					font-size: 26rpx;
					color: #8551EB;
					border-radius: 38rpx;
					background-color: #FFFFFF;
				}
			}

			.boxBtmOne {
				width: 100%;
				margin-top: 40rpx;
				justify-content: flex-start;

				.boxBtmOneLeft {
					align-items: flex-start;

					.month {
						font-family: HarmonyOS_Sans_SC_Light;
						font-size: 20rpx;
					}

					.number {
						font-family: HarmonyOS_Sans_SC_Bold;
						font-size: 20rpx;
					}
				}
			}

			.boxBtmTwo {
				width: 100%;
				font-family: HarmonyOS_Sans_SC_Light;
				font-size: 20rpx;
				color: #FFFFFF;
			}

		}

		.printListBox {
			width: 100%;
			margin-top: 30rpx;
			height: 950rpx;
			border-radius: 27rpx;
			background-color: #FFFFFF;
			padding: 30rpx 40rpx;
			box-sizing: border-box;

			.listTitle {
				.pointLogoImg {
					width: 66rpx;
					height: 66rpx;
					vertical-align: middle;
					margin-right: 10rpx;
				}

				font-family: HarmonyOS_Sans_SC_Bold;
				font-size: 34rpx;
				font-weight: 700;
				color: #000000;
				text-align: left;
			}

			.goods-ul {
				height: 58vh;

				.orderItemBox {
					width: 100%;

					.itemShopBox {
						width: 100%;

						.shopCardLeft {
							height: 120rpx;
							padding: 10rpx 0;
							box-sizing: border-box;
							align-items: flex-start;
							justify-content: space-evenly;

							.shopCardName {
								font-family: HarmonyOS_Sans_SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #000000;
								white-space: nowrap; //不换行
								overflow: hidden; //超出部分隐藏
								text-overflow: ellipsis; //文本溢出显示省略号
							}

							.shopCardSku {
								font-family: HarmonyOS_Sans_SC_Light;
								font-weight: 300;
								font-size: 20rpx;
								color: rgba(0, 0, 0, 0.5);
							}

						}

						.shopCardPrice {
							text-align: right;
							font-family: HarmonyOS_Sans_SC_Bold;
							font-size: 28rpx;
							color: #F21331;
							width: 100%;

							.number {
								font-weight: 700;
								font-size: 28rpx;
								color: #F21331;
							}

							.numberTwo {
								font-weight: 700;
								font-size: 28rpx;
								color: #000000;
							}
						}
					}
				}
			}


			.emptyBox {
				width: 350rpx;
				height: 485rpx;
				margin: 178rpx auto;

				.emptyImg {
					width: 100%;
					height: 170rpx;
				}
			}
		}

		.describeCon {
			width: 100%;
			padding: 74rpx;
			box-sizing: border-box;

			.describeConTitle {
				font-size: 28rpx;
				color: #000000;
				text-align: center;
			}

			.smallTitle {
				font-size: 24rpx;
				color: #000000;
				margin-top: 30rpx;
			}

			.conText {
				margin-top: 12rpx;
				font-size: 20rpx;
				color: rgba(0, 0, 0, 0.7);
			}
		}

	}

	.flex_heng {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.flex_shu {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}
</style>